Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

qr-code-styling

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

qr-code-styling

Add a style and an image to your QR code

  • 1.8.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
219K
decreased by-2.05%
Maintainers
1
Weekly downloads
 
Created

What is qr-code-styling?

The qr-code-styling npm package allows you to generate customizable QR codes with various styles and options. It provides a flexible way to create QR codes with different shapes, colors, and logos, making it suitable for branding and design purposes.

What are qr-code-styling's main functionalities?

Basic QR Code Generation

This feature allows you to generate a basic QR code with customizable dimensions, data, and dot styles. The code sample demonstrates how to create a QR code with rounded dots and a white background, append it to a canvas element, and download it as a PNG file.

const QRCodeStyling = require('qr-code-styling');
const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://example.com',
  image: '',
  dotsOptions: {
    color: '#000000',
    type: 'rounded'
  },
  backgroundOptions: {
    color: '#ffffff'
  }
});
qrCode.append(document.getElementById('canvas'));
qrCode.download({ name: 'qr', extension: 'png' });

Adding a Logo to QR Code

This feature allows you to add a logo to the center of the QR code. The code sample demonstrates how to include a logo image, set its cross-origin attribute, and define a margin around the logo.

const QRCodeStyling = require('qr-code-styling');
const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://example.com',
  image: 'https://example.com/logo.png',
  dotsOptions: {
    color: '#000000',
    type: 'rounded'
  },
  imageOptions: {
    crossOrigin: 'anonymous',
    margin: 20
  }
});
qrCode.append(document.getElementById('canvas'));
qrCode.download({ name: 'qr_with_logo', extension: 'png' });

Customizing QR Code Colors

This feature allows you to customize the colors of the QR code dots and background. The code sample demonstrates how to create a QR code with red square dots and a green background.

const QRCodeStyling = require('qr-code-styling');
const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://example.com',
  dotsOptions: {
    color: '#ff0000',
    type: 'square'
  },
  backgroundOptions: {
    color: '#00ff00'
  }
});
qrCode.append(document.getElementById('canvas'));
qrCode.download({ name: 'colored_qr', extension: 'png' });

Other packages similar to qr-code-styling

Keywords

FAQs

Package last updated on 21 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc